<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">洗车</view>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">◎</text>
			</view>
		</view>

		<scroll-view scroll-y class="content-scroll">
			<!-- 店铺图片 -->
			<image class="shop-banner" :src="shopInfo.banner" mode="aspectFill"></image>

			<!-- 店铺信息卡片 -->
			<view class="shop-card">
				<view class="shop-name">{{ shopInfo.name }}</view>
				<view class="shop-rating">
					<!-- 动态渲染实心星 -->
					<image src="/static/image/star.png" class="star-icon" v-for="i in shopInfo.rating"
						:key="`active-${i}`"></image>
					<!-- 动态渲染空心星 -->
					<image src="/static/image/start0.png" class="star-icon" v-for="i in 5 - shopInfo.rating"
						:key="`inactive-${i}`"></image>
					<text class="rating-text">{{ shopInfo.rating }}分</text>
					<text class="sales-text">销量: {{ shopInfo.sales }}</text>
				</view>
				<view class="shop-hours">营业时间: {{ shopInfo.hours }}</view>
				<view class="shop-location">
					<text>位置: {{ shopInfo.address }}</text>
					<text class="location-icon">✈</text>
				</view>
			</view>

			<!-- 服务项目 -->
			<view class="service-section">
				<view class="section-title">服务项目</view>
				<view class="service-options">
					<view class="service-option" v-for="(item, index) in serviceOptions" :key="index"
						:class="{ active: selectedService === index }" @click="selectService(index)">
						{{ item.name }}
					</view>
				</view>
				<view class="service-price">
					<text class="current-price">¥{{ currentService.price }}</text>
					<text class="original-price">¥{{ currentService.originalPrice }}</text>
				</view>
				<view class="service-desc">{{ currentService.description }}</view>
			</view>

			<!-- 服务评价 -->
			<view class="review-section">
				<view class="section-title">服务评价</view>
				<view class="review-item" v-for="(review, index) in reviews" :key="index">
					<image class="review-avatar" :src="review.avatar" mode="aspectFill"></image>
					<view class="review-content">
						<view class="review-header">
							<text class="review-name">{{ review.name }}</text>
							<!-- 动态渲染实心星 -->
							<image src="/static/image/star.png" class="star-icon" v-for="i in review.rating"
								:key="`active-${i}`"></image>
							<!-- 动态渲染空心星 -->
							<image src="/static/image/start0.png" class="star-icon" v-for="i in 5 - review.rating"
								:key="`inactive-${i}`"></image>
							<text class="review-date">{{ review.date }}</text>
						</view>
						<view class="review-text">{{ review.text }}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="contact-service" @click="showPhoneModal">
				<text class="service-icon">🎧</text>
				<text>联系客服</text>
			</view>
			<view class="order-btn" @click="goToConfirm">立即下单</view>
		</view>

		<!-- 拨号弹窗 -->
		<view class="phone-modal" v-if="showPhone" @click="hidePhoneModal">
			<view class="modal-content" @click.stop>
				<view class="phone-number">{{ shopInfo.phone }}</view>
				<view class="modal-btn" @click="copyPhone">复制</view>
				<view class="modal-btn cancel" @click="hidePhoneModal">取消拨号</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				selectedService: 1,
				showPhone: false,
				shopInfo: {
					name: '车百事汽车生活馆',
					rating: 4,
					sales: 556,
					hours: '周一至周五 早上8:00-晚上22:00',
					address: '山阳区人民路与解放路交叉口',
					banner: '/static/image/yy.png',
					phone: '18642589456'
				},
				serviceOptions: [{
						name: '普通洗车',
						price: 9.9,
						originalPrice: 30,
						description: '这里是普通洗车服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
					},
					{
						name: '精洗',
						price: 35.9,
						originalPrice: 60,
						description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
					},
					{
						name: '内饰清洗',
						price: 27.9,
						originalPrice: 80,
						description: '这里是内饰清洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
					},
					{
						name: '其他清洗',
						price: 8.6,
						originalPrice: 23,
						description: '这里是其它服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
					}
				],
				reviews: [{
						name: '黄**',
						avatar: '/static/image/touxiang.png',
						date: '2025-10-08',
						text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
						rating: 5,
					},
					{
						name: '黄**',
						avatar: '/static/image/yy.png',
						date: '2025-12-31',
						text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!',
						rating: 4,
					}
				]
			};
		},
		computed: {
			currentService() {
				return this.serviceOptions[this.selectedService] || this.serviceOptions[1];
			}
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			selectService(index) {
				this.selectedService = index;
			},
			showPhoneModal() {
				this.showPhone = true;
			},
			hidePhoneModal() {
				this.showPhone = false;
			},
			copyPhone() {
				uni.setClipboardData({
					data: this.shopInfo.phone,
					success: () => {
						uni.showToast({
							title: '已复制'
						});
					}
				});
			},
			goToConfirm() {
				uni.navigateTo({
					url: '/pages/index/washCar/orderConfirm/orderConfirm'
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #F5F7FA;
		display: flex;
		flex-direction: column;
	}

	.custom-nav {
		height: 44px;
		display: flex;
		align-items: center;
		background-color: #4A90E2;
		position: relative;
	}

	.nav-back {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: white;
		font-size: 32px;
		font-weight: bold;
		line-height: 44px;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		color: white;
		font-size: 18px;
		font-weight: 500;
	}

	.nav-right {
		width: 88px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 15px;
	}

	.nav-icon {
		color: white;
		font-size: 20px;
		margin-left: 10px;
	}

	.content-scroll {
		flex: 1;
	}

	.star-icon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
	}

	.shop-banner {
		width: 100%;
		height: 200px;
		background-color: #E0E0E0;
	}

	.shop-card {
		background-color: white;
		padding: 15px;
		margin-bottom: 10px;
	}

	.shop-name {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	.shop-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.stars {
		color: #FFD700;
		font-size: 14px;
		margin-right: 5px;
	}

	.rating-text {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}

	.sales-text {
		font-size: 14px;
		color: #666;
	}

	.shop-hours {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.shop-location {
		font-size: 14px;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.location-icon {
		color: #4A90E2;
		font-size: 16px;
	}

	.service-section {
		background-color: white;
		padding: 15px;
		margin-bottom: 10px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}

	.service-options {
		display: flex;
		margin-bottom: 15px;
	}

	.service-option {
		flex: 1;
		text-align: center;
		padding: 8px;
		border: 1px solid #E0E0E0;
		border-radius: 5px;
		margin-right: 10px;
		font-size: 14px;
		color: #666;
	}

	.service-option.active {
		background-color: #4A90E2;
		color: white;
		border-color: #4A90E2;
	}

	.service-price {
		margin-bottom: 10px;
	}

	.current-price {
		font-size: 20px;
		color: #FF4444;
		font-weight: bold;
		margin-right: 10px;
	}

	.original-price {
		font-size: 14px;
		color: #999;
		text-decoration: line-through;
	}

	.service-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	.review-section {
		background-color: white;
		padding: 15px;
		margin-bottom: 80px;
	}

	.review-item {
		display: flex;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #F5F7FA;
	}

	.review-item:last-child {
		border-bottom: none;
	}

	.review-avatar {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin-right: 10px;
		background-color: #E0E0E0;
	}

	.review-content {
		flex: 1;
	}

	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.review-name {
		font-size: 14px;
		color: #333;
		margin-right: 10px;
	}

	.review-stars {
		color: #FFD700;
		font-size: 12px;
		margin-right: 10px;
	}

	.review-date {
		font-size: 12px;
		color: #999;
		margin-left: auto;
	}

	.review-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background-color: white;
		display: flex;
		align-items: center;
		padding: 0 15px;
		border-top: 1px solid #F5F7FA;
	}

	.contact-service {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666;
	}

	.service-icon {
		font-size: 18px;
		margin-right: 5px;
		color: #4A90E2;
	}

	.order-btn {
		flex: 1;
		height: 40px;
		background-color: #4A90E2;
		color: white;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15px;
		font-size: 16px;
		font-weight: 500;
	}

	.phone-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 999;
	}

	.modal-content {
		width: 100%;
		background-color: white;
		border-radius: 15px 15px 0 0;
		padding: 20px;
	}

	.phone-number {
		text-align: center;
		font-size: 18px;
		color: #333;
		margin-bottom: 15px;
	}

	.modal-btn {
		height: 45px;
		line-height: 45px;
		text-align: center;
		background-color: #4A90E2;
		color: white;
		border-radius: 8px;
		margin-bottom: 10px;
		font-size: 16px;
	}

	.modal-btn.cancel {
		background-color: #F5F7FA;
		color: #666;
		margin-bottom: 0;
	}
</style>